<#include "/lib/lib.html">
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <title>团队轮播管理</title>
        <meta name="keywords" content="">
        <meta name="description" content="">

        <link rel="shortcut icon" href="${request.contextPath}/favicon.ico">
        <link href="${request.contextPath}/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
        <link href="${request.contextPath}/css/font-awesome.css?v=4.4.0" rel="stylesheet">
        <link href="${request.contextPath}/css/animate.css" rel="stylesheet">
        <link href="${request.contextPath}/css/style.css?v=4.1.0" rel="stylesheet">
        <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.min.css">
        <link rel="stylesheet" href="${request.contextPath}/css/plugins/bootstrap-validator/bootstrapValidator.min.css">
        <link href="${request.contextPath}/css/plugins/iCheck/custom.css" rel="stylesheet">
        <link rel="stylesheet" href="${request.contextPath}/plugins/bootstrap-fileinput/css/fileinput.min.css">
        <!-- Latest compiled and minified CSS -->
        <style>
            .form-control:focus,
            .single-line:focus {
                border-color: #0e9aef !important;
            }
            .checkbox-inline {
                line-height: 5px;
            }
        </style>
    </head>
    <body class="gray-bg">

    <div class="wrapper wrapper-content">

        <div class="ibox float-e-margins ibox-blue">
            <div class="ibox-title">
                <h5>团队轮播管理</h5>
                <div class="ibox-tools">
                    <a class="collapse-link">
                        <i class="fa fa-chevron-up"></i>
                    </a>
                    <a class="close-link">
                        <i class="fa fa-times"></i>
                    </a>
                </div>
            </div>
            <div class="ibox-content">
                <div class="row row-lg">

                    <div class="example" style="margin-top: -10px;">
                        <div class="btn-group hidden-xs" id="toolbar" role="group">
                            <button type="button" class="btn btn-outline btn-default" data-toggle="modal" data-target="#addModal">
                                <i class="glyphicon glyphicon-plus" aria-hidden="true"></i>
                                添加
                            </button>
                            <button type="button" class="btn btn-outline btn-default" id="updateButton">
                                <i class="glyphicon glyphicon-pencil" aria-hidden="true"></i>
                                修改
                            </button>
                            <button type="button" class="btn btn-outline btn-default" id="deleteButton">
                                <i class="glyphicon glyphicon-trash" aria-hidden="true"></i>
                                删除
                            </button>
                        </div>
                        <table id="userTableEvents"></table>
                    </div>

                </div>
            </div>
        </div>

    </div>

    <@modal "添加团队轮播" "addModal" "addForm">
    <div class="form-group">
        <label for="firstname" class="col-sm-2 control-label">QQ连接</label>
        <div class="col-sm-10">
            <input type="text" class="form-control" name="teamUrl" maxlength="255" placeholder="请输入QQ连接地址">
        </div>
    </div>
    <div class="form-group">
        <label for="firstname" class="col-sm-2 control-label">姓名</label>
        <div class="col-sm-10">
            <input type="text" class="form-control" name="teamName" maxlength="255" placeholder="请输入姓名">
        </div>
    </div>
    <div class="form-group">
        <label for="firstname" class="col-sm-2 control-label">排序号</label>
        <div class="col-sm-10">
            <input type="number" class="form-control" name="sort" maxlength="6" placeholder="请输入排序号">
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2">轮播图片</label>
        <input id="teamImg" type="hidden" name="teamImg">
        <div class="col-sm-10">
            <div class="file-loading">
                <input id="fileUpload" type="file" name="file" multiple>
            </div>
        </div>
    </div>
    </@modal>

    <!-- 全局js -->
    <script src="${request.contextPath}/js/jquery.min.js?v=2.1.4"></script>
    <script src="${request.contextPath}/js/bootstrap.min.js?v=3.3.6"></script>
    <!-- layer javascript -->
    <script src="${request.contextPath}/js/plugins/layer/layer.min.js"></script>
    <!-- 自定义js -->
    <script src="${request.contextPath}/js/content.js?v=1.0.0"></script>
    <!-- Latest compiled and minified JavaScript -->
    <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.min.js"></script>
    <!-- Latest compiled and minified Locales -->
    <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/locale/bootstrap-table-zh-CN.min.js"></script>
    <script src="${request.contextPath}/js/plugins/bootstrap-validator/bootstrapValidator.js"></script>
    <script src="${request.contextPath}/js/plugins/iCheck/icheck.min.js"></script>
    <script src="${request.contextPath}/plugins/bootstrap-fileinput/js/fileinput.min.js"></script>
    <script src="${request.contextPath}/plugins/bootstrap-fileinput/js/locales/zh.js"></script>

    <script>

        $(function () {
            $("#userTableEvents").bootstrapTable({
                url: '/admin/team/getList',
                method: 'post',
                contentType: "application/x-www-form-urlencoded",
                queryParamsType:'',//查询参数组织方式
                queryParams:queryParams,//请求服务器时所传的参数
                sidePagination:'server',//指定服务器端分页
                search: true,
                searchOnEnterKey: true,
                pagination: true,
                showRefresh: true,
                showToggle: true,
                showColumns: true,
                striped: true,
                pagination: true,
                sortable: false,
                sortOrder: "asc",
                clickToSelect: true,
                pageNumber:1,
                pageSize: 10,
                pageList: [1, 5, 10, 25, 50, 100, 'ALL'],
                iconSize: 'outline',
                toolbar: '#toolbar',
                icons: {
                    refresh: 'glyphicon-repeat',
                    toggle: 'glyphicon-list-alt',
                    columns: 'glyphicon-list'
                },
                responseHandler:function(res){
                    //在ajax获取到数据，渲染表格之前，修改数据源
                    /*console.log(res)*/
                    return res;
                },
                columns: [
                    {
                        title:'全选',
                        field:'select',
                        //复选框
                        radio:true,
                        width:25,
                        align:'center',
                        valign:'middle'
                    },
                    {
                        field: 'id',
                        title: 'ID',
                        align: 'center'
                    },
                    {
                        field: 'teamImg',
                        title: '图片',
                        align: 'center',
                        formatter:function(value,row,index){
                            return '<img src="/'+value+'" width="70px" height="80px">';
                        }
                    },
                    {
                        field: 'teamUrl',
                        title: '链接',
                        align: 'center'
                    },
                    {
                        field: 'teamName',
                        title: '姓名',
                        align: 'center'
                    },
                    {
                        field: 'sort',
                        title: '排序号',
                        align: 'center'
                    },
                    {
                        field: 'gmtCreate',
                        title: '创建时间',
                        align: 'center',
                        formatter:function(value,row,index){
                            return formatDateTime(value);
                        }
                    },
                    /*                    {
                     field: 'id',
                     title: '操作',
                     align: 'center',
                     formatter:function(value,row,index){
                     //通过formatter可以自定义列显示的内容
                     //value：当前field的值，即id
                     //row：当前行的数据
                     var a = '<a href="" >测试</a>';
                     return a + value;
                     }
                     },*/
                ]
            });

            //请求服务数据时所传参数
            function queryParams(params){
                return{
                    pageNumber: params.pageNumber,
                    pageSize: params.pageSize,
                    searchText: params.searchText
                }
            }

            function initFileInput(domId, uploadUrl) {
                var control = $('#' + domId);
                control.fileinput({
                    language: "zh",
                    uploadUrl: uploadUrl,
                    browseClass: "btn btn-success",
                    browseLabel: "选择轮播预览图片",
                    browseIcon: "<i class=\"glyphicon glyphicon-picture\"></i> ",
                    allowedFileExtensions: ['jpg', 'gif', 'png'],
                    showUpload: false,
                    dropZoneEnabled: false,
                    showPreview: true,
                    minFileCount: 1,
                    maxFileCount: 4,
                    validateInitialCount:true,
                    fileActionSettings : {
                        showRemove: false,
                        showZoom : true,
                        showUpload : false
                    },
                }).on("filebatchselected", function(event, files) {
                    $(this).fileinput("upload");
                }).on("fileuploaded", function(event, data, previewId, index) {
                    if (data.response.status) {
                        /*$(".file-caption-name").text(data.response.filePath);*/
                        $("#teamImg").val(data.response.filePath);
                    } else {
                        parent.layer.msg(data.response.msg, {time: 1500, icon:5});
                    }
                });;
            }

            initFileInput("fileUpload", "/admin/upload");



            //添加轮播
            $('#addModal').on('show.bs.modal', function () {
                $("#addForm").data('bootstrapValidator').destroy();
                $('#addForm').data('bootstrapValidator', null);
                addValidator();

                var $el = $('#fileUpload');

            });
            addValidator();
            function addValidator() {
                $('#addForm').bootstrapValidator({
                    fields: {
                        teamUrl: {
                            validators: {
                                notEmpty: {
                                    message: '轮播QQ地址不能为空'
                                },
                                stringLength: {
                                    max: 255,
                                    message: '轮播地址长度最多255个字符'
                                }
                            }
                        },
                        teamName: {
                            validators: {
                                notEmpty: {
                                    message: '姓名不能为空'
                                },
                                stringLength: {
                                    max: 40,
                                    message: '姓名长度最多20个字符'
                                }
                            }
                        },
                        sort: {
                            validators: {
                                notEmpty: {
                                    message: '排序号不能为空'
                                }
                            }
                        },
                        file: {
                            validators: {
                                notEmpty: {
                                    message: '轮播图片不能为空'
                                }
                            }
                        }
                    }
                }).on('success.form.bv', function(e) {
                    // Prevent form submission
                    e.preventDefault();
                    $.ajax({
                        url: "/admin/team/addTeam",
                        data:  $("#addForm").serialize(),
                        type: "POST",
                        dataType: 'json',
                        success: function(data){
                            $("#addModal").modal('hide');
                            if (data.success) {
                                $("#addModal").modal('hide');
                                $("#addForm")[0].reset();
                                $('#userTableEvents').bootstrapTable('refresh');
                                parent.layer.msg(data.msg, {icon: 1});
                            }
                        }
                    });
                });
            }

            //修改用户
            $("#updateButton").click(function () {
                var $result = $('#userTableEvents');
                var list = $result.bootstrapTable('getSelections');
                if (list.length <= 0 || list.length > 1) {
                    parent.layer.msg('请选中一条数据', {time: 1500, icon:5});
                    return;
                }
                list = list[0];
                window.location.href = "/admin/team/updateTeam/"+list.id;

            });

            //删除用户
            $("#deleteButton").click(function () {
                var $result = $('#userTableEvents');
                var list = $result.bootstrapTable('getSelections');
                if (list.length <= 0) {
                    parent.layer.msg('请选中一条数据', {time: 1500, icon:5});
                    return;
                }
                var id = list[0].id;
                parent.layer.confirm('确定删除选中轮播？', {
                    btn: ['确定','取消'], //按钮
                    shade: false //不显示遮罩
                }, function(){
                    $.ajax({
                        url: "/admin/team/delete",
                        data:  {"id": id},
                        type: "POST",
                        dataType: 'json',
                        success: function(data){
                            if (data.success) {
                                $('#userTableEvents').bootstrapTable('refresh');
                                parent.layer.msg(data.msg, {icon: 1});
                            } else {
                                parent.layer.msg(data.msg, {time: 1500, icon:5});
                            }
                        }
                    });
                });
            });

            /*$('.search').click(function(){
             $('#userTableEvents').bootstrapTable('refresh');
             })*/
        });
    </script>
    </body>
    </html>
